<template>
  <div class="chooseArea">
    <div class="choosed"></div>
    <dl v-for="item in saleAttrs" :key="item.id">
      <dt class="title">{{ item.saleAttrName }}</dt>
      <dd v-for="val in item.spuSaleAttrValueList" changepirce="0" @click="changeActive(item,val)"
          :class="{active:val.isChecked==1}">{{ (val as any).saleAttrValueName }}
      </dd>
    </dl>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{
  saleAttrs: any[],
}>()

function changeActive(attrItem: any, val: any) {
  attrItem.spuSaleAttrValueList.forEach((item: any) => {
    item.isChecked = 0
  })
  val.isChecked = 1
}
</script>
<style scoped lang="less">
.chooseArea {
  overflow: hidden;
  line-height: 28px;
  margin-top: 10px;

  dl {
    overflow: hidden;
    margin: 13px 0;

    dt {
      margin-right: 15px;
      float: left;
    }

    dd {
      float: left;
      margin-right: 5px;
      color: #666;
      line-height: 24px;
      padding: 2px 14px;
      border-top: 1px solid #eee;
      border-right: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      border-left: 1px solid #eee;

      &.active {
        color: green;
        border: 1px solid green;
      }
    }
  }
}
</style>
